<template>
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field name="uploader" label="文件上传">
          <template #input>
            <van-uploader v-model="value" :after-read="afterRead" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
const filename = ref(null)
const value = ref([
  { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
])
const onSubmit = (values) => {
  console.log('submit', values)
}
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  // console.log(file.content)
  const str = file.content
  const str2 = str.slice(23)
  // console.log(str2)
  filename.value = str2
  subPic(filename.value)
}
const subPic = (filename) => {
  axios
    .post('http://localhost:3000/img', {
      params: {
        filename,
      },
    })
    .then((res) => {
      console.log(res)
    })
  getPic(filename)
}
const getPic = (filename) => {
  axios
    .post(`http://localhost:3000/file/${filename}`, {
      params: {
        filename,
      },
    })
    .then((res) => {
      console.log(res)
    })
}
</script>

<style></style>
